<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
    />

    <title>左侧分类菜单右侧轮播图的组合布局</title>
    <link rel="stylesheet" href="../../libs/font-awesome.min.css">
    <link rel="stylesheet" href="index.css" />

    <link rel="icon" type="image/x-icon" href="../../../favicon.ico" />
</head>

  <body>
    <div class="container" id="app">
      <!-- banner -->
      <div class="banner" id="banner">
        <!-- banner内容将通过JS动态生成 -->
      </div>
      <!-- 上一张、下一张按钮 -->
      <div class="button prev" id="prevBtn">
        <i class="fa fa-angle-left"></i>
      </div>
      <div class="button next" id="nextBtn">
        <i class="fa fa-angle-right"></i>
      </div>
      <!-- 指示器 -->
      <div class="dots" id="dotsContainer">
        <!-- 指示器将通过JS动态生成 -->
      </div>
      <!-- 分类菜单 -->
      <div class="menu-content" id="menuContent">
        <!-- 菜单将通过JS动态生成 -->
      </div>
      <!-- 二级菜单 -->
      <div class="sub-menu hide" id="subMenu">
        <!-- 子菜单将通过JS动态生成 -->
      </div>
    </div>
  </body>
</html>

<script src="index.js"></script>
